<template>
  <div>
    <div class="time">
      <span>
        {{ timeY }}
      </span>
      <span style="margin-left: 70px">
        {{ timeW }}
      </span>
      <span style="margin-left: 17px">
        {{ timeH }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
const timeY = ref()
const timeH = ref()
const timeW = ref() //星期几
const format = () => {
  const oDate = new Date()
  const year = oDate.getFullYear()
  const month = oDate.getMonth() + 1
  const day = oDate.getDate()
  timeY.value = year + '年' + month + '月' + day + '日'
}
const format1 = () => {
  const oDate = new Date()
  const hour = oDate.getHours()
  var minutes = oDate.getMinutes()
  String(minutes).length == 1 ? (minutes = '0' + minutes) : minutes
  var seconds = oDate.getSeconds()
  String(seconds).length == 1 ? (seconds = '0' + seconds) : seconds
  timeH.value = hour + ':' + minutes + ':' + seconds
}
const format2 = () => {
  const today = ref(new Date())
  const dayOfWeek = today.value.getDay()
  // 输出星期几，例如：1
  const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  timeW.value = daysOfWeek[dayOfWeek]
}
onMounted(() => {
  setInterval(() => {
    format()
    format1()
    format2()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.time {
  width: 385px;
  height: 58px;
  background-image: url(/imgs/index/timeBg.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  span {
    font-family: ShiShangZhongHeiJianTi;
    font-weight: 400;
    font-size: 17px;
    color: #444e57;
    // position: relative;
  }
}
</style>
